<template>
  <div class="insert-attributes">
    <el-dialog
      title="插入属性"
      :close-on-click-modal="false"
      :visible.sync="isInsertAttributesShow"
      width="40%"
      :show-close="false"
    >
      <div class="insert-attributes-item">
        <div class="attributes-table">
          <el-table
            :data="attributeData"
            height="500"
            border
            style="width: 100%"
          >
            <el-table-column label="属性Code" width="140">
              <template slot-scope="scope">
                <span v-text="`<${scope.row.code}>`"></span>
              </template>
            </el-table-column>
            <el-table-column label="属性名称" width="120">
              <template slot-scope="scope">{{ scope.row.title }}</template>
            </el-table-column>
            <el-table-column label="备注">
              <template slot-scope="scope">{{ scope.row.remark }}</template>
            </el-table-column>
            <el-table-column label="操作" width="60">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="setAttributesEmploy(scope.row.code)"
                  >使用</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="attributes-table-pagination">
          <el-pagination
            @size-change="attributesSizeChange"
            @current-change="attributesCurrentChange"
            :current-page="page"
            :page-sizes="[10, 15, 20, 25]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="attributeTotal"
          >
          </el-pagination>
          <el-button type="primary" @click="setClosedShow">取 消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
import Attr from '@/api/attr';
import Way from '@/utils/way';

export default {
  name: 'insertAttributes',
  components: {},
  props: {},
  data() {
    return {
      page: 1, // 页数
      limit: 20, // 条数
      attributeData: [], // 数据列表
      attributeTotal: 0, // 数据总数
    };
  },
  computed: {
    // 是否显示
    isInsertAttributesShow() {
      return this.$store.state['insert-attributes'].isInsertAttributesShow;
    },
  },
  watch: {},
  created() {
    this.getAttributeList();
  },
  methods: {
    ...mapMutations('insert-attributes', [
      'setInsertAttributes',
      'setAttributesEmploy',
      'setClosedShow',
    ]),
    // 获取属性列表
    getAttributeList() {
      const that = this;
      Attr.getAttrList({ page: this.page, limit: this.limit }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          that.attributeData = res.data.rows;
          that.attributeTotal = res.data.total;
        } else {
          Way.setMessage(res.msg, 3);
        }
      });
    },

    attributesSizeChange(val) {
      this.limit = val;
      this.getAttributeList();
    },

    attributesCurrentChange(val) {
      this.page = val;
      this.getAttributeList();
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
.insert-attributes {
  .insert-attributes-item {
    .attributes-table {
      /deep/ span {
        font-size: 12px;
      }
    }
    .attributes-table-pagination {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80px;
    }
  }
}
</style>
